<template>
  <div>
   <label :class="{changeAnimate:isChangeAnimate,resetAnimate:!isChangeAnimate}">{{info.label}}</label>
   <input :type="info.type?info.type:'text'" @focus="isChangeAnimate=true" @blur="resetStyle" v-model="info.val" />
   <i @click="toogle(info.toogle)">{{info.right}}</i>
  </div>
</template>

<script>
export default {
    data() {
        return {
            isChangeAnimate:false
        }
    },
    methods: {
        resetStyle(){
           if(this.info.val!=''){
              this.isChangeAnimate=true;
           }
           else{
              this.isChangeAnimate=false;
           }
        },
        toogle(fun){
            if(fun !==undefined){
                fun();
            }
        }
    },
  props:{
      info:{
          type:Object,
      }
  }
}

</script>
<style lang="scss" scoped>
div {
  height: 70px;
  width: 100%;
  position: relative;
  label {
    position: absolute;
    bottom: 10px;
    font-size: 16px;
  }
  input {
    width: 100%;
    height: 40px;
    border: none;
    border-bottom: 1px solid #888;
    background: transparent;
    position: absolute;
    bottom: 0px;
    &:hover {
      outline: none;
      border-bottom: 2px solid $starbucks-color;
      transition: 0.5s;
    }
  }
  i {
    position: absolute;
    top: 2.5rem;
    right: 0px;
    color: $starbucks-color;
  }
}
.changeAnimate {
  bottom: 40px;
  font-size: 12px;
  transition: 0.5s;
}
.resetAnimate {
  bottom: 10px;
  font-size: 16px;
  transition: 0.5s;
}
</style>